<template>
  <div class="cart">
    <div
      class="cart-list"
      v-if="cartList.length > 0"
    >
      <div
        class="cart-list-item"
        v-for="item in cartList"
        :key="item.id"
      >
        <div class="cart-l">
          <van-checkbox v-model="item.selected"></van-checkbox>
        </div>
        <div class="cart-r">
          <van-card
            :price="item.price + '.00'"
            desc="描述信息"
            :title="item.title"
            :thumb="item.img"
          >
            <template #num>
              <van-stepper
                class="step"
                v-model="item.count"
                theme="round"
                button-size="22"
                disable-input
                @minus="reduceAssign(item.id)"
                @plus="addAssign(item.id)"
              />
            </template>
          </van-card>
        </div>
      </div>
      <div class="delete-goods">
        <van-button
          type="warning"
          color="red"
          @click="deleteGoods"
          >删除商品</van-button
        >
      </div>
    </div>
    <div v-else>
      <van-empty
        description="购物车中暂无商品,请前往商城选购吧"
        image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa4064bdab5f6c800ed664014f3eb7d13a4dd25b3138d0-hYHe07_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666529719&t=9c5217045710cf29c021d4cf9d75dc76"
      >
        <template #default>
          <van-button
            type="primary"
            to="/home/goodslist"
            >前往商城</van-button
          >
        </template>
      </van-empty>
    </div>
    <van-submit-bar
      :price="getAllPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="getChecked">全选/反选</van-checkbox>
      <template #tip> 你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span> </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['getCheckBox', 'getAllPrice']),
    // 全选/反选的复选框不能由v-model来直接操作修改,而应该是
    // 1.如果是获取, 则是通过get去调用getCheckBox ()方法获取上面每一项商品的复选框状态
    // 2.如果是设置,则是通过set让mutations去修改购物车列表中每一项的复选框状态,
    getChecked: {
      get() {
        return this.getCheckBox;
      },
      // 此处的selected为布尔值,就是全选/反选的复选框状态
      set(selected) {
        this.$store.commit('cart/toggle_checked_all', selected);
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    onClickEditAddress() {},
    onSubmit() {},
    // 增加购物车中商品的数量,通过commit去通知mutation里面的addAssign()进行修改操作
    addAssign(id) {
      this.$store.commit('cart/addAssign', id);
    },
    // 增加购物车中商品的数量,通过commit去通知mutation里面的reduceAssign()进行修改操作
    reduceAssign(id) {
      this.$store.commit('cart/reduceAssign', id);
    },
    deleteGoods() {
      this.$store.commit('cart/deleteGoods');
    },
  },
};
</script>
<style lang="scss" scoped>
.cart {
  padding: 10px;
  .cart-list {
    .cart-list-item {
      border: 1px solid #eee;
      display: flex;
      margin-bottom: 10px;
      .cart-l {
        flex: 0.5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cart-r {
        flex: 2.5;
        margin-top: 0;
      }
    }
    .delete-goods {
      display: flex;
      justify-content: flex-end;
    }
  }
  .go-pay {
    color: skyblue;
  }
}
</style>
